<th:block th:fragment="basicStaticResources">
    <th:block th:replace="~{gateway_fragments/common::basicStyleResources}"></th:block>
    <th:block th:replace="~{gateway_fragments/common::basicScriptResources}"></th:block>
</th:block>

<th:block th:fragment="basicScriptResources">
    <script th:inline="javascript">
        const i18nResources = {
            sendVerificationCodeSuccess: `[(#{js.sendVerificationCode.success})]`,
            sendVerificationCodeFailed: `[(#{js.sendVerificationCode.failed})]`,
            sendVerificationCodeSending: `[(#{js.sendVerificationCode.sending})]`,
            passwordConfirmationFailed: `[(#{js.passwordConfirmation.failed})]`,
        };
    </script>

    <script src="/js/main.js"></script>
</th:block>

<th:block th:fragment="basicStyleResources">
    <link rel="stylesheet" href="/webjars/normalize.css/8.0.1/normalize.css" />
    <link rel="stylesheet" th:href="|/styles/main.css?v=${site.version}|" />
</th:block>

<div th:remove="tag" th:fragment="languageSwitcher">
    <style>
        .language-switcher {
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 2em 0;
            gap: 0.625rem;
        }

        .language-switcher label {
            color: var(--color-text);
            display: inline-flex;
        }

        .language-switcher select {
            all: unset;
            border: 1px solid var(--color-border);
            font-size: var(--text-sm);
            height: 2em;
            border-radius: var(--rounded-lg);
            outline: none;
            padding: 0 2em 0 0.5em;
            display: inline-flex;
            align-items: center;
            color: var(--color-text);
            background-color: var(--color-text);
            background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1em' height='1em' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='m12 13.171l4.95-4.95l1.414 1.415L12 16L5.636 9.636L7.05 8.222z'/%3E%3C/svg%3E");
            background-repeat: no-repeat;
            background-position: right 0.45rem center;
        }

        .language-switcher select:focus {
            border-color: var(--color-primary);
        }
    </style>
    <div class="language-switcher">
        <label for="language-select">
            <svg viewBox="0 0 24 24" width="1.2em" height="1.2em">
                <path
                    fill="currentColor"
                    d="m12.87 15.07l-2.54-2.51l.03-.03A17.5 17.5 0 0 0 14.07 6H17V4h-7V2H8v2H1v2h11.17C11.5 7.92 10.44 9.75 9 11.35C8.07 10.32 7.3 9.19 6.69 8h-2c.73 1.63 1.73 3.17 2.98 4.56l-5.09 5.02L4 19l5-5l3.11 3.11zM18.5 10h-2L12 22h2l1.12-3h4.75L21 22h2zm-2.62 7l1.62-4.33L19.12 17z"
                ></path>
            </svg>
        </label>
        <select id="language-select" onchange="changeLanguage()">
            <option value="en" th:selected="${#locale.toLanguageTag} == 'en'">English</option>
            <option value="es" th:selected="${#locale.toLanguageTag} == 'es'">Español</option>
            <option value="zh-CN" th:selected="${#locale.toLanguageTag} == 'zh-CN'">简体中文</option>
            <option value="zh-TW" th:selected="${#locale.toLanguageTag} == 'zh-TW'">繁体中文</option>
        </select>
        <script type="text/javascript">
            function changeLanguage() {
                const selectedLanguage = document.getElementById("language-select").value;
                const currentURL = new URL(window.location.href);
                currentURL.searchParams.set("language", selectedLanguage);

                history.replaceState(null, "", currentURL.toString());

                window.location.reload();
            }
        </script>
    </div>
</div>

<div th:remove="tag" th:fragment="haloLogo">
    <style>
        .halo-logo {
            width: 100%;
            display: flex;
            justify-content: center;
            margin-bottom: 2em;
        }

        .halo-logo img {
            width: 6em;
        }
    </style>
    <div class="halo-logo">
        <img src="/images/wordmark.svg" alt="Halo" />
    </div>
</div>

<div th:remove="tag" th:fragment="socialAuthProviders">
    <th:block th:unless="${#lists.isEmpty(socialAuthProviders)}">
        <div class="divider-wrapper">
            <hr />
            <th:block th:text="#{socialLogin.label}"></th:block>
            <hr />
        </div>
        <ul class="pill-items">
            <li th:each="provider : ${socialAuthProviders}">
                <form
                    class="social-auth-provider-form"
                    th:action="|/login/social/${provider.metadata.name}?remember-me=false|"
                    method="post"
                >
                    <button type="submit">
                        <img th:src="${provider.spec.logo}" th:alt="|${provider.spec.displayName}'s icon|" />
                        <span th:text="${provider.spec.displayName}"></span>
                    </button>
                </form>
            </li>
        </ul>
    </th:block>
    <script>
        document.addEventListener("DOMContentLoaded", function () {
            const rememberMeCheckbox = document.getElementById("remember-me");
            const socialAuthProviders = document.querySelectorAll(".social-auth-provider-form");
            
            rememberMeCheckbox.addEventListener("change", function (e) {
                const rememberMe = e.target.checked;
                
                socialAuthProviders.forEach((form) => {
                    const url = new URL(form.action, window.location.origin);
                    url.searchParams.set("remember-me", rememberMe ? "true" : "false");
                    form.action = url.pathname + url.search;
                });
            });
        });
    </script>
</div>

<div th:remove="tag" th:fragment="passwordResetMethods">
    <th:block th:unless="${#lists.isEmpty(otherMethods)}">
        <div class="divider-wrapper">
            <hr />
            <th:block th:text="#{passwordResetMethods.label}"></th:block>
            <hr />
        </div>
        <ul class="pill-items">
            <li th:each="method : ${otherMethods}">
                <a th:href="${method.href}">
                    <img th:src="${method.icon}" th:alt="|${method.name}'s icon|" />
                    <span
                        th:text="${#messages.msgOrNull('passwordResetMethods.' + method.name + '.displayName') ?: method.name}"
                    ></span>
                </a>
            </li>
        </ul>
    </th:block>
</div>

<div th:remove="tag" th:fragment="signupNoticeContent">
    <style>
        .signup-notice-content {
            font-size: var(--text-sm);
            color: var(--color-text);
            text-align: center;
            margin: 1em 0;
        }

        .signup-notice-content a {
            color: var(--color-link);
            text-decoration: none;
        }
    </style>
    <div th:if="${globalInfo.allowRegistration}" class="signup-notice-content">
        <div>
            <th:block th:text="#{signupNotice.description}"></th:block>
            <a th:href="@{/signup}" th:text="#{signupNotice.link}"></a>
        </div>
    </div>
</div>

<div th:remove="tag" th:fragment="loginNoticeContent">
    <style>
        .login-notice-content {
            font-size: var(--text-sm);
            color: var(--color-text);
            text-align: center;
            margin: 1em 0;
        }

        .login-notice-content a {
            color: var(--color-link);
            text-decoration: none;
        }
    </style>
    <div th:if="${globalInfo.allowRegistration}" class="login-notice-content">
        <div>
            <th:block th:text="#{loginNotice.description}"></th:block>
            <a th:href="@{/login}" th:text="#{loginNotice.link}"></a>
        </div>
    </div>
</div>

<div th:remove="tag" th:fragment="returnToSiteContent">
    <style>
        .returntosite-content {
            font-size: var(--text-sm);
            text-align: center;
            margin: 1em 0;
        }

        .returntosite-content a {
            color: var(--color-text);
            display: inline-flex;
            align-items: center;
            gap: 0.3em;
            text-decoration: none;
        }
    </style>
    <div class="returntosite-content">
        <a th:href="@{/}">
            <svg viewBox="0 0 24 24" width="1.2em" height="1.2em">
                <path fill="currentColor" d="M21 11H6.83l3.58-3.59L9 6l-6 6l6 6l1.41-1.42L6.83 13H21z"></path>
            </svg>
            <span th:text="#{returnToSite}"></span>
        </a>
    </div>
</div>
